<template>
  <div>
    <el-container style="height: 535px;padding: 20px">
      <el-table :data="tableData" max-height="600">
        <el-table-column prop="acc" label="用户账号" width="200">
        </el-table-column>
        <el-table-column prop="sfid" label="身份id" width="600">
        </el-table-column>
        <el-table-column prop="enabled" :formatter="formatBoolean" label="账号状态" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template v-slot:default="scope">
            <el-button @click="deleteRow(scope.$index, tableData)" type="danger" size="mini">移除</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, tableData)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <UserEdit ref="edit"></UserEdit>
    </el-container>
  </div>
</template>

<script>
import UserEdit from './UserEdit'

export default {
  name: 'UserTable',
  components: {UserEdit},
  data () {
    return {
      visible: false,
      tableData: [{
        acc: '',
        sfid: '',
        enabled: ''
      }]
    }
  },
  methods: {
    formatBoolean (row, column, cellValue) {
      var ret = ''
      if (cellValue) {
        ret = '启用'
      } else {
        ret = '禁用'
      }
      return ret
    },
    handleEdit (index, row) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.confirmForm = row.at(index)
    },
    deleteRow (index, rows) {
      this.$confirm('确定强制删除该用户信息? 该用户的所有账户信息将会从系统中删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.visible = false
        this.$axios.get('admin/blacklist_manager/' + rows.at(index).acc + '/delete').then(resp => {
          if (resp.code === 200) {
            this.$message.info('删除成功')
          }
        }).catch(failResponse => {
          alert('服务器响应请求失败！')
        })
        rows.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.$axios.get('admin/blacklist_manager/all-info').then(resp => {
      this.tableData = resp.data
    }).catch(failResponse => {
    })
  }
}
</script>

<style scoped>
.el-container {
  padding: 20px 0;
  height: 200px;
  background-color: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
